<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="mycanvas"></canvas>
	</body>
	<script type="text/javascript" src="../js/numArray.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById("mycanvas");
		var ctx = canvas.getContext("2d");
//		ctx.strokeRect(0, 0, canvas.width, canvas.height);
		var balls = [];
		var x = parseFloat(document.documentElement.clientWidth) - 25;
		var y = parseFloat(document.documentElement.clientHeight) - 25;
		canvas.width = x;
		canvas.height = y;
		var bili;
		bili = ((x / y) > 2.25) ? (y / 600) : (x / 1300);
		window.onresize = function() {
			var x = parseFloat(document.documentElement.clientWidth) - 25;
			var y = parseFloat(document.documentElement.clientHeight) - 25;
			canvas.width = x;
			canvas.height = y;
			bili = ((x / y) > 2.25) ? (y / 600) : (x / 1300);
		}

		function crtnum(num, jl, t) {
			for(var i = 0; i < numbers[num].length; i++) {
				for(var j = 0; j < numbers[num][i].length; j++) {
					if(numbers[num][i][j] == 1) {
						ctx.beginPath();
						ctx.fillStyle = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
						ctx.arc((j * 20 + 20) * bili + jl, (i * 20 + 20) * bili, 10 * bili, 0, 2 * Math.PI);
						ctx.fill();
						if(t) {
							balls.push(new ball((j * 20 + 20) * bili + jl, (i * 20 + 20) * bili, 10 * bili));
						}
					}
				}
			}
		}

		function time() {
			data = new Date();
			hh = data.getHours() >= 10 ? data.getHours() : ("0" + data.getHours());
			mm = data.getMinutes() >= 10 ? data.getMinutes() : ("0" + data.getMinutes());
			ss = data.getSeconds() >= 10 ? data.getSeconds() : ("0" + data.getSeconds());
			hh1 = parseInt(hh / 10);
			hh2 = hh % 10;
			mm1 = parseInt(mm / 10);
			mm2 = mm % 10;
			ss1 = parseInt(ss / 10);
			ss2 = ss % 10;
		}
		time();
		var hh_1 = hh1;
		var hh_2 = hh2;
		var mm_1 = mm1;
		var mm_2 = mm2;
		var ss_1 = ss1;
		var ss_2 = ss2;

		function LEDtime() {
			time();
			hh1 == hh_1 ? crtnum(hh1, 0, false) : crtnum(hh1, 0, true);
			hh2 == hh_2 ? crtnum(hh2, 160 * bili, false) : crtnum(hh2, 160 * bili, true);
			crtnum(10, 300 * bili, false);
			mm1 == mm_1 ? crtnum(mm1, 380 * bili, false) : crtnum(mm1, 380 * bili, true);
			mm2 == mm_2 ? crtnum(mm2, 540 * bili, false) : crtnum(mm2, 540 * bili, true);
			crtnum(10, 680 * bili, false);
			ss1 == ss_1 ? crtnum(ss1, 760 * bili, false) : crtnum(ss1, 760 * bili, true)
			ss2 == ss_2 ? crtnum(ss2, 920 * bili, false) : crtnum(ss2, 920 * bili, true)
			hh_1 = hh1;
			hh_2 = hh2;
			mm_1 = mm1;
			mm_2 = mm2;
			ss_1 = ss1;
			ss_2 = ss2;
		}

		window.onload = function() {
			setInterval(function() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
//				ctx.strokeRect(0, 0, canvas.width, canvas.height);
				LEDtime();
				drawball();
			}, 50)
		}

		function ball(x, y, r) {
			this.x = x;
			this.y = y;
			this.r = r;
			this.vx = parseInt(Math.random() * 5) + 5;
			this.zx = (Math.random() > 0.5) ? 1 : -1;
			this.vy = (parseInt(Math.random() * 20) + 5) * ((Math.random() > 0.5) ? 1 : -1);
			this.color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
		}

		function createball(ctx, ball) {
			ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
		}

		function drawball() {
			var count = 0;
			for(var i in balls) {
				ctx.beginPath();
				balls[i].y += balls[i].vy;
				balls[i].vy += 9.8;
				balls[i].x += balls[i].vx * balls[i].zx;
				vy = Math.abs(balls[i].vy);
				if(balls[i].y >= canvas.height - balls[i].r) {
					balls[i].y = canvas.height - balls[i].r;
					balls[i].vy = -0.65 * balls[i].vy;
				}
				createball(ctx, balls[i]);
				ctx.fillStyle = balls[i].color;
				ctx.fill();
				if(balls[i].x > -balls[i].r && balls[i].x < canvas.width + balls[i].r) {
					balls[count++] = balls[i];
				}
			}
			balls.splice(count + 1, balls.length - count - 1, "");
		}
	</script>

</html>